﻿{literal}
<link rel="STYLESHEET" type="text/css" href="./css/forum-crop.css">
<style>
.coordCell{
	border: 1px solid Gray;
	width: 40px;
}
.semaphore16 {
    display:    block;
    width:      16px;
    height:     16px;
    background: transparent 0 0 no-repeat;
}
.semaphore11 {
    display:    block;
    width:      11px;
    height:     11px;
    background: transparent 0 0 no-repeat;
}
.semaphore12 {
    display:    block;
    width:      12px;
    height:     12px;
    background: transparent 0 0 no-repeat;
}

.semaphore16.a { background-image: url(/i/autolevels.gif); }
.semaphore16.l { position: absolute; top: 0px; left: 0px; background-image: url(/i/channelL.gif); }
.semaphore12.r { position: absolute; top: 0px; left: 20px; background-image: url(/i/channelR.gif); }
.semaphore12.g { position: absolute; top: 0px; left: 32px; background-image: url(/i/channelG.gif); }
.semaphore12.b { position: absolute; top: 0px; left: 44px; background-image: url(/i/channelB.gif); }

.semaphore12.on      { background-position: -16px 0px; }
.semaphore11.on      { background-position: -16px 0px; }
.semaphore16.on      { background-position: -16px 0px; }
#semFav  { background-image: url(/images/sem_fav.gif); }
#semGold { background-image: url(/images/sem_gold.gif); }
#semStar { background-image: url(/images/sem_star.gif); }
#semCrop { background-image: url(./images/sem_crop.png);/*position: absolute; top: 0px; left: 0px; */}
#semGrid { background-image: url(./images/sem_grid.png); position: absolute; top: 0px; left: 20px; }
#semSele { background-image: url(/images/sem_select.png); }
</style>
<script type="text/javascript" src="./js/croptool/klayers~funcs~dhtml.js"></script>
<script type="text/javascript" src="./js/croptool/base~handlers~json2~ajax-rpc~mouse-tail~searchhighlighter.js"></script>
<script type="text/javascript" src="./js/croptool/cropper.js"></script>
<script>
CropperEngine.textName = "fld0ffa1da7";
</script>

<script type="text/javascript" src="./js/croptool/selecter.js"></script>
<script>
var lastSizeEdited = 0;
var width = 0;
var height = 0;
var proport = height>0? width/height : 0;
var openedType = 0;
var image;
{/literal}
{gallery action=GETGALITEM varname=pic id=$id}
var id={$id};
var ext = "{$pic.ext}";
{literal}
function onReposition()
{
if(!window.resizeRatio) window.resizeRatio = 1;
	crop = CropperEngine.getCrop();
	x = crop.nc1.w-8; if(x<0) x=0; document.getElementById('xCrop').value = Math.round(resizeRatio*x);
	y = crop.nc1.h-8; if(x<0) y=0; document.getElementById('yCrop').value = Math.round(resizeRatio*y)
	w = crop.nc2.w-8; if(x<0) w=0; else w=document.images['mainpic'].width - Math.round(resizeRatio*w)-x; document.getElementById('wCrop').value = w;
	h = crop.nc2.h-8; if(x<0) h=0; else h=document.images['mainpic'].height - Math.round(resizeRatio*h)-y; document.getElementById('hCrop').value = h;
}
function Zoom(i)
{
	document.images['mainpic'].height=document.images['mainpic'].height+i;
	document.images['mainpic'].width= Math.round(document.images['mainpic'].height*proport);
	
	document.getElementById('wCrop').value = document.images['mainpic'].width;
	document.getElementById('hCrop').value = document.images['mainpic'].height;	
}
function zoomClick(i)
{
	crop = CropperEngine.getCrop();
	if (crop.active) showCrop();
	t=setInterval('Zoom('+i+')',60);
}
function Resize()
{
	crop = CropperEngine.getCrop();
	if (crop.active) {
	}
	else
	{
		if (document.getElementById('proportions').checked)
		{	
			if (lastSizeEdited==2)
			{
				document.images['mainpic'].height = document.getElementById('hCrop').value;
				document.images['mainpic'].width = Math.round(document.images['mainpic'].height*proport);
			}
			else
			{
				document.images['mainpic'].width = document.getElementById('wCrop').value;
				document.images['mainpic'].height = Math.round(document.images['mainpic'].width/proport);
			}
		}
		else
		{
			document.images['mainpic'].width = document.getElementById('wCrop').value;
			document.images['mainpic'].height = document.getElementById('hCrop').value;
		}
		document.getElementById('wCrop').value = document.images['mainpic'].width;
		document.getElementById('hCrop').value = document.images['mainpic'].height;
	}
}
function GetSelectedImageType()
{
	o = document.getElementById('imgSize');
	return o.value;
}
function OpenImage()
{
	crop = CropperEngine.getCrop();
	if (crop.active) showCrop();
	o1 = document.getElementById('imageContainer');
	image = null;
	o1.innerHTML = "";
	image = document.createElement('img');
	image.id="mainpic";
	image.name="mainpic";
	image.onload = onImageLoaded;
	
	type = GetSelectedImageType();
	switch(type)
	{
	case '0':image.src="../../images/gallery/"+id+"."+ext; type = 0; break;
	case '1':image.src="../../images/gallery/s_"+id+"."+ext; type = 1; break;
	case '2':image.src="../../images/gallery/m_"+id+"."+ext; type = 2; break;
	case '3':image.src="../../images/gallery/b_"+id+"."+ext; type = 3; break;
	}
	o1.appendChild(image);
	openedType = type;
}
function onImageLoaded()
{
	width = image.width;
	height = image.height;
	proport = height>0? width/height : 0;
	document.getElementById('wCrop').value = image.width;
	document.getElementById('hCrop').value = image.height;
}
function SaveImage()
{
	type = GetSelectedImageType();
	if (type==0) 
	{
		alert("Не указано в качестве какой картинки сохранить отредактированное изображение.\nОригинал изображения изменять нельзя");
		return;
	}
	switch(type)
	{
	case '1':type = 1; break;
	case '2':type = 2; break;
	case '3':type = 3; break;
	}

	ref = "index.php?module=gallery&fixact=1&action=editimage";
	ref += "&id="+id;
	ref += "&ot="+openedType;
	ref += "&st="+type;
	
	crop = CropperEngine.getCrop();
	if (crop.active)
	{
		if(!window.resizeRatio) window.resizeRatio = 1;
		x = crop.nc1.w-8; if(x<0) x=0; x = Math.round(resizeRatio*x);
		y = crop.nc1.h-8; if(x<0) y=0; y = Math.round(resizeRatio*y);
		w = crop.nc2.w-8; if(x<0) w=0; else w=document.images['mainpic'].width - Math.round(resizeRatio*w)-x;
		h = crop.nc2.h-8; if(x<0) h=0; else h=document.images['mainpic'].height - Math.round(resizeRatio*h)-y;
		ref += "&crop="+x+","+y+","+w+","+h;
	}
	
	ref += "&size="+document.images['mainpic'].width+","+document.images['mainpic'].height;
	location.href = ref;
}
</script>
{/literal}
<div align="left" style="background-color: #F0F0F0; padding: 3px; border-bottom: 1px solid Gray;">
<table border="0" cellpadding="3" cellspacing="0" width="100%"><tr><td width="250" style="border-right: 1px solid Gray;"><img src="./images/save.png" width="15" height="15" alt="" border="0" onclick="SaveImage();"> <select id="imgSize" size="1"><option value="0" {if $imageType==0}SELECTED="true"{/if}>Оригинал</option><option value="1" {if $imageType==1}SELECTED="true"{/if}>Маленькая</option><option value="2" {if $imageType==2}SELECTED="true"{/if}>Средняя</option><option value="3" {if $imageType==3}SELECTED="true"{/if}>Большая</option></select> <img src="./images/open.gif" width="17" height="13" border="0" alt="" onclick="OpenImage();"></td><td width="26"><a id="semCrop" class="semaphore16" rel="nofollow" title="кадрирование" href="#" onclick="this.blur(); return showCrop();"></a></td><td width="22"><img src="./images/zoom_p.gif" width="16" height="16" alt="" border="0" onmousedown="zoomClick(1);" onmouseup="clearInterval(t);" onmouseout="clearInterval(t);"></td><td width="20"><img src="./images/zoom_m.gif" width="16" height="16" alt="" border="0" onmousedown="zoomClick(-1);" onmouseup="clearInterval(t);" onmouseout="clearInterval(t);"></td><td align="right" style="border-left: 1px solid Gray;">
<table border="0"><tr><td>x:</td><td><input type="text" id="xCrop" class="coordCell" ></td><td>y:</td><td><input type="text" id="yCrop"  class="coordCell"></td><td>w:</td><td><input type="text" id="wCrop"  class="coordCell"  onChange="lastSizeEdited=1"></td><td>h:</td><td><input type="text" id="hCrop"  class="coordCell"  onChange="lastSizeEdited=2"></td><td><input type="checkbox" id="proportions" value="1">пропорции <button onclick="Resize();">ok</button></td></tr></table></td></tr></table></div>
<div align="center" style="padding: 10px;" id="imageContainer"></div>
<script>
OpenImage();

{literal}
var ALflag = false;
var GRflag = false;
preloadImage("img/please_wait.gif");


CropperEngine.initiated = false

window.SetCrop = function(left, top, right, bottom) { 
    if(!CropperEngine.initiated) { CropperEngine.init('mainpic'); CropperEngine.initiated = true; } 
    CssClasses($id("semCrop")).add("on")
    CropperEngine.setCrop(left, top, right, bottom) 
};


var selecter = new selectOnImage(document.getElementById('mainpic'));
selecter.onSelect = function(b) {
    if(!window.resizeRatio) window.resizeRatio = 1;

	s = "<fragment";
	s+= (" "+Math.round(resizeRatio*b.left));
	s+= (" "+Math.round(resizeRatio*b.top));
	s+= (" "+Math.round(resizeRatio*b.width));
	s+= (" "+Math.round(resizeRatio*b.height));
	s += ">";	
    var textName = "fld0ffa1da7";
	document.forms["commentform"][textName].value += s;
	document.forms["commentform"][textName].focus();
}
window.SetFragment = function(left, top, width, height) {
    CssClasses($id("semSele")).add("on")
    window.scrollTo(0,0);
    if(!window.resizeRatio) window.resizeRatio = 1;
	left = Math.round(left/window.resizeRatio);
	top = Math.round(top/window.resizeRatio);
	width =  Math.round(width/window.resizeRatio);
	height = Math.round(height/window.resizeRatio);
    selecter.showFragment(left, top, width, height);
}



function flipAutoLevels()
{
	ALflag = !ALflag;
	if(ALflag) {
		image('alimg').setSrc("img/x_auto_on.gif");
		image('mainpic').setSrc("img/please_wait.gif");
		image('mainpic').setSrc("/pict/434/a2155550.jpg");
	} else {
		image('alimg').setSrc("img/x_auto.gif");
		image('mainpic').setSrc("/pict/2b8/2155550.jpg");
	}
}

function flipGrayscale()
{
	ALflag = !ALflag;
	if(ALflag) {
		image('grimg').setSrc("img/x_gray_on.gif");
		image('mainpic').setSrc("img/please_wait.gif");
		image('mainpic').setSrc("/pict/434/g2155550.jpg");
	} else {
		image('grimg').setSrc("img/x_gray.gif");
		image('mainpic').setSrc("/pict/2b8/2155550.jpg");
	}
}

function showLevels()
{
	window.open('/levels.php?id=2155550','','width=580,height=240,status=no,toolbar=no,menubar=no,location=no');
}

</script>

<script>
function showCrop() {
    if(!CropperEngine.initiated) {CropperEngine.init('mainpic'); CropperEngine.initiated = true;} 
    var semCrop = $id("semCrop")
//    var semGrid = $id("semGrid")
    if(CssClasses(semCrop).exists("on")) {
        CssClasses(semCrop).remove("on")
        //CssClasses(semGrid).remove("on")
    } else {
        CssClasses(semCrop).add("on")
    }

    CropperEngine.turnCrop()
    return false
}
function showGrid() {
    if(!CropperEngine.initiated) { CropperEngine.init('mainpic'); CropperEngine.initiated = true; } 
    var semCrop = $id("semCrop")
    var semGrid = $id("semGrid")
    if(CssClasses(semCrop).exists("on")) {
        CssClasses(semGrid).flip("on")
    } else {
        CssClasses(semCrop).add("on")
        CssClasses(semGrid).add("on")
    }
    CropperEngine.turnGrid()
    return false
}
function showSelect() {
    var semSele = $id("semSele")
    if(CssClasses(semSele).exists("on")) {
        CssClasses(semSele).remove("on")
    } else {
        CssClasses(semSele).add("on")
    }
    selecter.flip()
    return false
}

var channelsCache = {}

function showChannel(channel) {
    var channels = {};
    var channelIndexes = ["R", "G", "B", "L", "A"];
    for(var i=0; i<channelIndexes.length; i++) {
        var c  = channelIndexes[i];
        var el = document.getElementById("channel"+c);
        channels[c] = el;
        if(channel != c) CssClasses(el).remove("on")
    }
    var classes = CssClasses(channels[channel])
    if(classes.exists("on")) {
        classes.remove("on")
        image('mainpic').setSrc("/pict/2b8/2155550.jpg")
    } else {
        if(channelsCache[channel]) {
            classes.add("on")
            image('mainpic').setSrc(channelsCache[channel]);
        } else {
            var request = serverRequest("/work-services", {'action' : 'makeChannel', 'id' : 2155550, 'channel' : channel }, 
                function(data) {
                    channelsCache[channel] = data
                    image('mainpic').setSrc(channelsCache[channel]);
                })
            if(request) {
                classes.add("on")
                image('mainpic').setSrc("img/please_wait.gif");
            }
        }
    }
    return false
}
</script>
{/literal}
